<template>
  <!--监测手机号任务 -->
  <div class="app-container">
    <div v-loading="loading">
      <el-form :model="queryParams" ref="queryForm" :inline="true" class="search-form-new" label-width="80px">
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="监控类型" prop="type">
          <el-select v-model="queryParams.type" clearable>
            <el-option :label="item.label" :value="key" v-for="(item,key) in taskTypeOptions" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="监控名称" prop="name">
          <el-input v-model="queryParams.name" placeholder="请输入" clearable size="small" />
        </el-form-item>
        <el-form-item label="检查间隔" prop="intervalDays">
          <el-select v-model="queryParams.intervalDays" v-if="queryParams.type!=2" clearable>
            <el-option :label="item.label" :value="key" v-for="(item,key) in days1" :key="key"></el-option>
          </el-select>
          <el-select v-model="queryParams.intervalDays" v-if="queryParams.type==2" clearable>
            <el-option :label="item.label" :value="key" v-for="(item,key) in days2" :key="key"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否启用" prop="state">
          <el-select v-model="queryParams.state" placeholder="请选择" size="small" clearable @change="search">
            <el-option v-for="(dict, i) in enabledOptions" :key="i" :label="dict.name" :value="dict.value" />
          </el-select>
        </el-form-item>

        <el-form-item class="btns">
          <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button icon="el-icon-refresh" type="warning" @click="resetQuery">重置</el-button>
          <el-button icon="el-icon-plus" type="success" v-hasPermi="['jiankong:addgroup']" @click="addACount">新增</el-button>
          <el-button  type="primary" v-hasPermi="['jiankong:addgroup']" @click="goJlu">监控记录</el-button>
        </el-form-item>
      </el-form>
      <div class="table_box">
        <el-table stripe :data="tableData.records" style="width: 100%">
          <el-table-column label="监控ID" width="100">
            <template slot-scope="scope">
              <span>{{ scope.row.id }}</span>
            </template>
          </el-table-column>
          
          <el-table-column label="所属店铺" prop="tenantName" />
          <el-table-column label="监控名称" prop="name" />
          <el-table-column label="上次执行日期" prop="lastDate" :formatter="(row)=>formatTime(row)"/>
          <el-table-column label="检查间隔" prop="intervalDays">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type==2" :type="days2[scope.row.intervalDays].type">{{days2[scope.row.intervalDays].label}}</el-tag>
              <el-tag v-else :type="days1[scope.row.intervalDays].type">{{days1[scope.row.intervalDays].label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="监控类型" prop="type">
            <template slot-scope="scope">
              <el-tag :type="taskTypeOptions[scope.row.type].type">{{taskTypeOptions[scope.row.type].label}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商品数" prop="goodsCot">
            <template slot-scope="scope">
              <span style="color: #897ddc;cursor: pointer;" @click="openGoods(scope.row)">{{ scope.row.goodsCot }}</span>
            </template>
          </el-table-column>
          <el-table-column label="异常数" prop="errCot">
            <template slot-scope="scope">
              <span style="color: red;cursor: pointer;" @click="openErr(scope.row)">{{ scope.row.errCot }}</span>
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" />
          <el-table-column label="状态" prop="state">
            <template slot-scope="scope">
              <el-switch @change="changeAbled($event, scope.row.id)" :active-value="1" :inactive-value="2" v-model="scope.row.state"></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="openGoods(scope.row)">关联商品</el-button>
              <el-button type="edit" @click="handleUpdate(scope.row)" v-hasPermi="['jiankong:editgroup']">编辑</el-button>
              <el-button type="del" @click="delItem(scope.row)" v-hasPermi="['jiankong:delgroup']">删除</el-button>
              <!-- <el-button type="text" size="mini" @click="queryItem(scope.row)"
                >查询</el-button
              > -->
              <!-- <el-button type="text" size="mini" @click="queryRecords(scope.row)"
                >查询记录</el-button
              > -->
            </template>
          </el-table-column>
        </el-table>
        <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </div>

    <!-- 一下是弹出框 -->
    <addDialog ref="addDialog"></addDialog>
  </div>
</template>

<script>
import addDialog from "./addGroup.vue";
import checkPhoneApi from "@/api/gameConfig/checkPhonePx";
import shengyu from "@/components/yudu/shengyu.vue";
export default {
  name: "Jiankongfenzu",
  components: { addDialog, shengyu },
  data() {
    return {
      tableData: {
        records: [],
        total: 0,
      },
      enabledOptions: [
        {
          name: "启用",
          value: "1",
        },
        {
          name: "停用",
          value: "2",
        },
      ],
      taskTypeOptions: {
        1: {
          label: "掉绑监控",
          value: "1",
          type: "success",
        },
        2: {
          label: "转手监控",
          value: "2",
          type: "danger",
        },
      },
      days1: {
        1: {
          label: "1天",
          value: 1,
          type: "",
        },
        3: {
          label: "3天",
          value: 3,
          type: "success",
        },
        7: {
          label: "7天",
          value: 7,
          type: "warning",
        },
        10: {
          label: "10天",
          value: 10,
          type: "",
        },
        15: {
          label: "15天",
          value: 15,
          type: "dnager",
        },
      },
      days2: {
        3:{
          label:'3天',
          value:3,
          type:'success'
        },
        5:{
          label:'5天',
          value:5,
          type:''
        },
        7:{
          label:'7天',
          value:7,
          type:'warning'
        },
        10:{
          label:'10天',
          value:10,
          type:''
        },
        15:{
          label:'15天',
          value:15,
          type:'success'
        },
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        tpye: "",
        name: "",
        intervalDays: "",
        state: "",
      },
      // shengyu:0
    };
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList
    },
    
  },
  created() {
    this.getList();
    // this.residueNumber()
  },
  methods: {
    goJlu(){
      this.$router.push({
        name:'Jiankongjilu'
      })
    },
    // 打开监控异常的记录
    openErr(row){
      // 加时间戳
      const timestamp = new Date().getTime();
      this.$router.push({
          name:'CheckPhoneErrorRecords',
          query:{
            monitorTaskType:row.type,
            monitorTaskId:row.id,
            timestamp:timestamp
          }
        })

    },
    formatTime(row){
     return this.parseTime(row.lastDate,'{y}-{m}-{d}')
    },
    // 自动获取剩余次数
    // residueNumber(){
    //   infoApi.residueNumber().then(res=>{
    //     this.shengyu = res.data
    //   })
    // },
    // 获取列表
    getList() {
      this.tableData.records = [];
      this.loading = true;
      this.$nextTick(() => {
        checkPhoneApi
          .monitorTaskList(this.queryParams)
          .then((response) => {
            this.loading = false;
            this.tableData.records = response.rows;
            this.tableData.total = response.total;
          })
          .catch((err) => {
            this.loading = false;
          });
      });
    },
    // 启用状态改变
    changeAbled(e, id) {
      checkPhoneApi
        .editMonitorTask({ id: id, state: e })
        .then((res) => {
          this.$message({
            type: "success",
            message: res.msg,
          });
          this.getList();
        })
        .catch((err) => {
          this.getList();
        });
    },
    // 搜索
    search() {
      this.getList();
    },
    //重置
    resetQuery() {
      this.queryParams = {};
      this.getList();
    },
    // 新增
    addACount() {
      this.$refs.addDialog.open("add");
    },
    // 到关联商品
    openGoods(row) {
      this.$router.push("/jiankongfloder/jiankongshangpin/goods/" + row.id);
      // this.$router.push({
      //   path:'/tenantUtils/jiankongfloder/jiankongshangpin',
      //   query:{
      //     taskId:row.id
      //   }
      // })
    },
    // 编辑
    handleUpdate(row) {
      // 查看详情
      this.$refs.addDialog.open("edit", row);
    },
    // 查询记录弹窗打开
    queryRecords(row) {
      this.$refs.recordsDialog.open(row.id);
    },
    //查询结果
    queryItem(row) {
      this.loading = true;
      checkPhoneApi.query(row.id).then((res) => {
        this.loading = false;
        if (res.code == 200) {
          this.$alert(
            `当前账号状态${
              res.data.status == "0"
                ? "正常"
                : res.data.status == "1"
                ? "被找回"
                : res.data.status == "2"
                ? "二变无"
                : res.data.status == "3"
                ? "今日上限"
                : "账号错误"
            }，详细任务信息请点击“查询记录”查看`
          );
        }
        /**
         * <span v-show="scope.row.status=='0'" style="color: aqua;">正常</span>
                 <span v-show="scope.row.status=='1'" style="color: red;">被找回</span>
                 <span v-show="scope.row.status=='2'" style="color: orange;">二变无</span>
                 <span v-show="scope.row.status=='3'">今日上限</span>
                 <span v-show="scope.row.status=='4'" style="color: red;">账号错误</span>
         */
      });
    },
    // 删除记录
    delItem(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          checkPhoneApi.delMonitorTask(row.id).then((res) => {
            this.$message({
              type: "success",
              message: res.msg,
            });
            this.getList();
          });
        })
        .catch(() => {});
    },
    // 每页条数改变
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    // 页码改变
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped></style>
